<template>
  <div>
        <Row>
      <i-col :xs="24" :md="24" :lg="24" style="margin-bottom: 20px;">
        <Card shadow>
          <DatePicker @on-change="setPayTypeCountSearchDate" type="daterange" split-panels placeholder="选择查询周期" style="width: 200px" />
          <span style="margin-left: 15px;">微信收入: {{wechat_IncomeTotal}}</span>
          <span style="margin-left: 15px;">微信支出: {{wechat_SpendingTotal}}</span>
          <span style="margin-left: 15px;">支付宝收入: {{aliPay_IncomeTotal}}</span>
          <span style="margin-left: 15px;">支付宝支出: {{aliPay_SpendingTotal}}</span>
          <Divider />
          <MultipleLineEcharts ref="multipleLineEcharts" style="height: 300px;" :xAxisData="multipleLineXAxisData" :yUnit="yUnit" :seriesDataArray="multipleLineSeriesDataArray" :legend="legend" :text="multipleLineTitle" :titleName="multipleLineTitleName"/>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
import { payTypeCountByDate } from '@/api/home'
import {getDate} from '@/api/utils-v2'
import MultipleLineEcharts from '../charts/MultipleLineEcharts'
import * as ResponseStatus from '@/api/response-status'

export default {
  name: 'PayTypeEcharts',
  components: {
    MultipleLineEcharts
  },
  data() {
    return {
      multipleLineTitleName: '每日平台收支统计',
      multipleLineTitle: '平台收支统计',
      multipleLineXAxisData: '平台收支统计',
      multipleLineSeriesDataArray: [],
      legend:[],
      multipleLineBeginDate: '',
      multipleLineEndDate: '',
      wechat_IncomeTotal: 0,
      wechat_SpendingTotal: 0,
      aliPay_IncomeTotal: 0,
      aliPay_SpendingTotal: 0,
      yUnit: "元",
    }
  },
  mounted() {
    this.initMultipleLineData()
  },
  methods: {
    initMultipleLineData() {
      var currDate = new Date()
      // 初始化订单量数据
      if (this.multipleLineBeginDate === '') {
        this.multipleLineBeginDate = getDate(currDate,-6)
      }
      if (this.multipleLineEndDate === '') {
        this.multipleLineEndDate = getDate(currDate,0)
      }
      const params = {
        beginDateStr: this.multipleLineBeginDate,
        endDateStr: this.multipleLineEndDate
      }
      payTypeCountByDate(params)
        .then(res => {
          const data = res.data
          if (data.code === ResponseStatus.OK) {
            this.multipleLineTitle = data.message
            this.multipleLineXAxisData = data.data[0].xAxisData
            this.multipleLineSeriesDataArray = data.data[0].seriesDataArray
            this.legend = data.data[0].legend
            this.wechat_IncomeTotal = data.data[1]
            this.wechat_SpendingTotal = data.data[2]
            this.aliPay_IncomeTotal = data.data[3]
            this.aliPay_SpendingTotal = data.data[4]
            this.$refs.multipleLineEcharts.initData()
          } else {
            this.$Message.error(data.message)
          }
        })
        .catch(err => {
          this.$Message.error(err)
        })
    },
    setPayTypeCountSearchDate(time) {
      const date = time.toString().split(",")
      this.multipleLineBeginDate = date[0]
      this.multipleLineEndDate = date[1]
      this.initMultipleLineData()
    }
  }
}
</script>

<style lang="less">
</style>
